<script setup>
import { ref } from 'vue'

const input = ref('')
const emit = defineEmits(['inputData'])

const updateParent = () => {
  emit('inputData', input.value)
  input.value = ''
}

</script>

<template>
  <div class="input-message-box">
    <textarea id="myTextarea" class="user-message" rows="4" cols="20" v-model="input"></textarea>
    <button class="user-send-button" @click="updateParent">发<br>送</button>
  </div>
</template>

<style scoped>
.input-message-box {
  height: 80%;
}

.input-message-box > .user-message, .input-message-box > .user-send-button {
  margin-top: 16px
}

.input-message-box > .user-message {
  width: 88%;
  height: 90%;
  float: left;
  margin-left: 5px;
  resize: none;
  border: 3px solid black;
  border-radius: 10px;
  font-size: 16px;
}

.input-message-box > .user-message:focus {
  outline: none; /* 移除默认的选中边框 */
  border: 3px solid black; /* 设置输入框被选中时的边框样式 */
}

.input-message-box > .user-send-button {
  width: 7%;
  height: 88%;
  margin-left: 10px;
  display: inline-block;
  border: 3px solid black;
  border-radius: 10px;
  background-color: white;
}

.input-message-box > .user-send-button:active {
  background-color: #D2D3D2;
}



</style>